$--color-grade0: #e0e0e0;
$--color-grade1: #0396ff;
$--color-grade2: #8C1BAB;
$--color-grade3: #f37795;
$--color-grade4: #fa742b;
$--color-grade5: #f8d800;
$--color-grade6: #360940;

.equipName {
  &.grade0 {
    color: $--color-grade0;
  }
  &.grade1 {
    color: $--color-grade1;
  }
  &.grade2 {
    color: $--color-grade2;
  }
  &.grade3 {
    color: $--color-grade3;
  }
  &.grade4 {
    color: $--color-grade4;
  }
  &.grade5 {
    color: $--color-grade5;
  }
  &.grade6 {
    color: $--color-grade6;
  }
}
.equip-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &.grade0 {
    // border: 1px solid $--color-grade0;
    box-shadow: 0 0 8px 1px $--color-grade0 inset;
    box-sizing: border-box;
  }
  &.grade1 {
    // border: 1px solid $--color-grade1;
    box-shadow: 0 0 8px 1px $--color-grade1 inset;
    box-sizing: border-box;
  }
  &.grade2 {
    // border: 1px solid $--color-grade2;
    box-shadow: 0 0 8px 1px $--color-grade2 inset;
    box-sizing: border-box;
  }
  &.grade3 {
    // border: 1px solid $--color-grade3;
    box-shadow: 0 0 8px 1px $--color-grade3 inset;
    box-sizing: border-box;
  }
  &.grade4 {
    // border: 1px solid $--color-grade4;
    box-shadow: 0 0 8px 1px $--color-grade4 inset;
    box-sizing: border-box;
  }
  &.grade5 {
    // border: 1px solid $--color-grade5;
    box-shadow: 0 0 8px 1px $--color-grade5 inset;
    box-sizing: border-box;
  }
  &.grade6 {
    // border: 1px solid $--color-grade6;
    box-shadow: 0 0 8px 1px $--color-grade6 inset;
    box-sizing: border-box;
  }

  cursor: pointer;
  &:hover {
    box-shadow: 0 0 15px 6px rgba($color: #aaaaff, $alpha: 0.8) inset;
    border: 1px solid rgba($color: #ffffff, $alpha: 0.8);
    border-radius: 4px;
  }
  &:active {
    box-shadow: 0 0 15px 6px rgba($color: #aaaaff, $alpha: 0.3) inset;
  }
}
